<template>
    <div class="home" style="z-index: 1">
        <div class="tal_class_searchBox" >
                <van-search v-model="search" placeholder="请输入关键词" @search="getSearch"></van-search>
            <div class="tal_class_searchMask"></div>
        </div>
        <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" style="width: 328px; height: 160px"/>
            </van-swipe-item>
        </van-swipe>
        <van-cell title="图书类别" is-link url="" class="hot" value="更多分类" @click="moreCategory"></van-cell>
        <van-grid :column-num="4">
          <van-grid-item  v-for="category in category1" :key="category.id" :text="category.name" :icon="category.imgUrl"></van-grid-item>
        </van-grid>
        <van-cell title="热门图书" is-link url="" class="home-hot-book-list" value="更多图书"></van-cell>
        <van-list>
          <template>
            <div class="book-item" v-for="book in books" :key="book">
              <van-image class="home-hot-book-img" :src="book.img" @click="bookDetail(book.id)">
              </van-image>
              <div class="content" @click="bookDetail(book.id)">
                <p class="book-author">{{book.title}}</p>
                <p class="book-gist">简述:{{book.gist}}</p>
                <p class="book-hot">热度值:{{book.hot}}</p>
              </div>
            </div>
          </template>
        </van-list>



    </div>
</template>

<script>
    import Vue from 'vue';
    import {Lazyload} from 'vant';
    import {ApiService} from "../../axios/apiService";
    import {Search} from 'vant'
    export const home= new ApiService('/home')
    Vue.use(Lazyload)
    Vue.use(Search)
    export default {
        props: {
        },
        data() {
            return {
                bannerImages:[],
                images: [
                    'http:////m.360buyimg.com/babel/s774x310_jfs/t1/158984/3/9910/108617/6040a5f5E6ae5331d/6ca3c77a09930477.jpg!q70.dpg.webp',
                    'http://m.360buyimg.com/babel/s774x310_jfs/t1/153729/2/20987/117202/6041c86dEdad66d1b/b4ed7bd5f65cec88.jpg!q70.dpg.webp',
                ],
                books: [],
                category1:[],
                search:'',
            };
        },
        mounted() {
            console.log('初始化数据')
            this.getCatalog1();
            this.getHotBookList();
            console.log(document.cookie)
        },
        methods: {
          getSearch() {
            console.log(this.search)
            this.$router.push({
             name:"bookList",
             params:{
               key:this.search,
               category2Id:-1
             },
            })
          },
          //获取热门图书
          getHotBookList() {
              const api = new ApiService("/book/hot")
              api.get().then(res=> {
                this.books = res.data.data;
              })
            },
          //获取一级分类列表
          getCatalog1() {
            const catalog1 = new ApiService('/iteam/catalog1')
            catalog1.getViewList().then(res => {
              this.category1 = res.data.data
            })
          },
          // 更多分类
          moreCategory() {
              this.$router.push("/category")
          },
          // 图书详情
          bookDetail(id) {
            console.log(id)
            this.$router.push(
                {
                  name:"bookDetail",
                  params: {
                    bookId:id,
                  }
                }
            )
          }
        }
    };
</script>
<style scoped>
    .my-swipe .van-swipe-item {
        color: #ffffff;
        font-size: 20px;
        width: 100vm;
        height: 20vh;
        vertical-align: middle;
        text-align: center;
        background-color: #39a9ed;
    }
    .home-hot-book-img {
      width: 140vw;
      height: 14vh;
      margin-top: auto;
      margin-bottom: auto;
    }
    .book-item {
      display: flex;
      height: 20vh;
      width: 100vw;
      background: white
    }
    .book-author {
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      font-size: large;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical
    }
    .book-gist {
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical
    }
    .book-hot {
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical
    }
    .content {
      width: 294vw;
    }
</style>
